<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>事务管理</title>
	<%@include file="/WEB-INF/common/static.jsp" %>
	<script type="text/javascript">
		function showGroupMember(){
			var groupId =  $("#group").val();
			if(groupId == ''){
				$("#groupMember").empty();
				return false;
			}
			$("#groupMember").load("${ctx}/officeManage/groupManange/showGroupMember.do",{
				groupId : groupId
			});
			$("#allInforms").load("${ctx}/officeManage/groupManange/showGroupInform.do",{
				groupId : groupId
			});
		}
		
		function updateGroupMembers(){
			var userIds = [];
           	$('input[name="username"]').each(function(){
           		if($(this).is(":checked")){
           			userIds.push($(this).val());
           		}
           	});
           	if(userIds.length < 1){
           		alert("至少选择一名组员");
           		return false;
           	}
           	$.post("${ctx}/officeManage/groupManange/updateGroupMembers.do",{
        		groupId : $("#group").val(),
        		userIds : userIds
        	},function(data){
        		if(200 == data.code){
        			alert("更新分组成功");
        			showGroupMember();
        		}else{
        			alert("添加失败！失败原因：" + data.data);
        		}
        	},"json")
		}
		
		function showUpdateGroupMembers(){
			var groupId =  $("#group").val();
			if(groupId == ''){
				$("#updateButton").removeAttr("href");
				alert("请先选择要修改的组");
			}else{
				$("#updateButton").attr("href","#EditModals");
				$("#showAllUsers").load("${ctx}/officeManage/groupManange/showAllUsers.do",function(){
					$(".groupNo").each(function(){
						var currentName = $(this).text().trim();
						$('input[name="username"]').each(function(){
			           		if($(this).parent().text().trim() == currentName){
			           			$(this).prop("checked",true);
			           		}
			           	});					
					});
				});
			}
		}
	</script>
</head>
<body>
    <ul class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active"><a
			href="${ctx }/officeManage/groupManange/showHaveGroups.do">查看团队</a></li>
		<li role="presentation"><a 
			href="${ctx }/officeManage/groupManange/newGroup.do">新建团队</a></li>
	</ul>
	<div class="container" style="margin:0 0 0 25px;">
		<div class="form-horizontal">
			<div class="form-group" style="padding-top:20px;">
				<label class="col-sm-2 control-label">团队名称：</label>
				<div class="col-sm-8">
					<select id="group" onchange="showGroupMember();" class="form-control">
						<option></option>
						<c:forEach var="group" items="${groups }">
							<option value="${group.id }">${group.name }</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">团队成员：</label>
				<div class="col-sm-7" id="groupMember">
					
				</div>
				<div class="col-sm-1">
					<button type="button" class="btn btn-primary namesava" data-toggle="modal" id="updateButton" onclick="showUpdateGroupMembers();">编辑</button>
				</div>
			</div>
			
			<div id="EditModals" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color:white">x</button>
                            <span>更新组成员</span>
                        </div>
                        <div class="modal-body">
                        	<div class="form-group" style="padding:20px;" id="showAllUsers">
								
							</div>
                    	</div>
                    	<div class="modal-footer">
                        	<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" onclick="updateGroupMembers();">更新</button>
                    	</div>
                    </div>
                </div>
       		</div>
        		<div id="allInforms">
	        		
			</div>
			
		</div>
	</div>
</body>
</html>